<template>
  <div class="Dmax">
    <div class="Dmax-1">
      <div class="Dmaxx">
        <div class="top-1">
          <div class="top-12"></div>
          <div class="top-13">累计巡查次数</div>
          <div class="top-14">5623</div>
        </div>
        <div class="top-1">
          <div class="top-121"></div>
          <div class="top-131">累计自查次数</div>
          <div class="top-141">17284</div>
        </div>
      </div>
      <div class="Dmaxs">
        <div class="tou-1">
          <div class="tou-11"></div>
          <div class="tou-12">累计发现隐患数</div>
          <div class="tou-13">4661</div>
        </div>
        <div class="tou-1">
          <div class="tou-111"></div>
          <div class="tou-122">累计发现隐患数</div>
          <div class="tou-133">4192</div>
        </div>
      </div>
    </div>
    <div class="Dmax-2">
      <div class="bou-1"></div>
    </div>
  </div>
</template>

<script lang="ts" setup></script>

<style lang="scss" scoped>
.Dmax {
  width: 100%;
  height: 210px;
  /* background-color: aqua; */
  padding: 10px;
  box-sizing: border-box;
  display: flex;
  .Dmax-1 {
    flex: 1;
    .Dmaxx {
      width: 296px;
      height: 132px;
      padding: 5px;
      box-sizing: border-box;
      background: linear-gradient(
          270deg,
          rgba(178, 118, 0, 0.95) 0%,
          rgba(91, 46, 0, 0.8) 100%
        ),
        linear-gradient(
          180deg,
          rgba(255, 126, 62, 0.5) 0%,
          rgba(110, 66, 44, 0) 100%
        );
      border-radius: 18px 6px 18px 6px;
      border: 2px solid;
      border-image: radial-gradient(
          circle,
          rgba(255, 239, 208, 1),
          rgba(255, 202, 128, 0.7),
          rgba(255, 210, 166, 0)
        )
        2 2;
      margin-bottom: 40px;
      .top-1 {
        display: flex;
        /* background-color: aqua; */
        align-items: center;
        justify-content: space-evenly;
        width: 100%;
        margin: 15px 0;
        .top-12 {
          width: 30px;
          height: 30px;
          background-image: url('../assets/Home/y-8.png');
          background-repeat: no-repeat;
          background-size: cover;
        }
        .top-121 {
          width: 30px;
          height: 30px;
          background-image: url('../assets/Home/z-1.png');
          background-repeat: no-repeat;
          background-size: cover;
        }
        .top-13 {
          font-size: 16px;
          font-family:
            PingFangSC-Medium,
            PingFang SC;
          font-weight: 500;
          color: #ffffff;
        }
        .top-131 {
          font-size: 16px;
          font-family:
            PingFangSC-Medium,
            PingFang SC;
          font-weight: 500;
          color: #ffffff;
        }
        .top-14 {
          font-size: 36px;
          font-family: Roboto-BoldCondensedItalic, Roboto;
          font-weight: normal;
          color: #ffcc66;
          line-height: 36px;
          letter-spacing: 1px;
          background: linear-gradient(180deg, #ffffff 0%, #ffcc66 100%);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
        }
        .top-141 {
          font-size: 36px;
          font-family: Roboto-BoldCondensedItalic, Roboto;
          font-weight: normal;
          color: #ffcc66;
          line-height: 36px;
          letter-spacing: 1px;
          background: linear-gradient(180deg, #ffffff 0%, #ffcc66 100%);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
        }
      }
    }
    .Dmaxs {
      width: 296px;
      height: 132px;
      padding: 5px;
      box-sizing: border-box;
      background: linear-gradient(
          270deg,
          rgba(167, 47, 0, 0.95) 0%,
          rgba(105, 30, 0, 0.92) 53%,
          rgba(116, 34, 0, 0.8) 100%
        ),
        linear-gradient(
          180deg,
          rgba(255, 85, 0, 0.5) 0%,
          rgba(110, 66, 44, 0) 100%
        );
      border-radius: 18px 6px 18px 6px;
      border: 2px solid;
      border-image: linear-gradient(
          270deg,
          rgba(255, 105, 64, 1),
          rgba(255, 153, 125, 1)
        )
        2 2;
      .tou-1 {
        display: flex;
        align-items: center;
        justify-content: space-evenly;
        margin: 15px 0;
        .tou-11 {
          width: 30px;
          height: 30px;
          background-image: url('../assets/Home/z-2.png');
          background-repeat: no-repeat;
          background-size: cover;
        }
        .tou-111 {
          width: 30px;
          height: 30px;
          background-image: url('../assets/Home/z-3.png');
          background-repeat: no-repeat;
          background-size: cover;
        }
        .tou-12 {
          font-size: 16px;
          font-family:
            PingFangSC-Medium,
            PingFang SC;
          font-weight: 500;
          color: #ffffff;
        }
        .tou-122 {
          font-size: 16px;
          font-family:
            PingFangSC-Medium,
            PingFang SC;
          font-weight: 500;
          color: #ffffff;
        }
        .tou-13 {
          font-size: 36px;
          font-family: Roboto-BoldCondensedItalic, Roboto;
          font-weight: normal;
          color: #ff744c;
          line-height: 36px;
          letter-spacing: 1px;
          background: linear-gradient(180deg, #ffffff 0%, #ff744c 100%);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
        }
        .tou-133 {
          font-size: 36px;
          font-family: Roboto-BoldCondensedItalic, Roboto;
          font-weight: normal;
          color: #ff744c;
          line-height: 36px;
          letter-spacing: 1px;
          background: linear-gradient(180deg, #ffffff 0%, #ff744c 100%);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
        }
      }
    }
  }
  .Dmax-2 {
    flex: 1;
    /* background-color: rebeccapurple; */
    .bou-1 {
      margin-left: 30px;
      width: 200px;
      height: 300px;
      /* background-color: red; */
      background-image: url('../assets/Home/s-11.png');
      background-size: 100% 300px;
      background-repeat: no-repeat;
      /* background-color: red; */
    }
  }
}
</style>
